<template>
  <div>
    <el-form class="query-table-form" @submit.native.prevent :inline="true" :model="params">
      <el-form-item>
        <el-input
          v-model="params.customer_name"
          placeholder="项目名称查询"
          clearable
          @change="getData()"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-date-picker
          class="date-picker-ml"
          v-model="queryDate"
          type="monthrange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
          @change="handleDateQuery"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-search" @click="getData()">查询</el-button>
      </el-form-item>
      <div class="text-muted" v-loading="countLoading">
        <div>合计：</div>
        还款计划：
        <span class="text-primary">{{ totalCount || '-' }}</span>
        。 项目数：
        <span class="text-primary">{{ countDataTotal || '-' }}</span>
        。应还金额：
        <span class="text-primary">{{ Math.round(countData.p / 100) / 100 || '-' }}</span>
        万元 。
      </div>
    </el-form>

    <c-table border v-loading="loading" :columns="tableColumns" :data="tableData"></c-table>
    <div class="query-pagination">
      <div></div>
      <el-pagination
        layout="total, prev, pager, next, jumper"
        :current-page.sync="params.index"
        :page-size="params.size"
        :total="totalCount"
        @current-change="getData"
      ></el-pagination>
    </div>

    <repay-dialog
      :visible.sync="replayVisible"
      :query-id="queryId"
      @success="getData()"
    ></repay-dialog>

    <collection-register :visible.sync="editVisible" :query-id="editId"></collection-register>

    <post-view :visible.sync="viewVisible" :related-id="viewId"></post-view>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import RepayDialog from '@/credit/views/city/self/after/repay/RepayDialog'
import CollectionRegister from '@/credit/views/city/risk/collection/component/register/RegisterList'
import PostView from '@/credit/views/city/risk/PostView'

export default {
  components: { RepayDialog, CollectionRegister, PostView },
  props: {},
  data() {
    return {
      tableName: 'datum_repay_list_view_expire',
      params: {
        index: 1,
        size: 10,
      },
      tableData: [],
      totalCount: 0,
      order: {
        pay_time: 'asc',
      },
      tableColumns: [
        { attrs: { label: '客户名称', prop: 'customer_name', align: 'center' } },
        { attrs: { label: '地址', prop: 'address', align: 'center' } },
        { attrs: { label: '联系电话', prop: 'mobile_no', align: 'center', width: '110px' } },
        { attrs: { label: '放款金额(万元)', prop: 'reply_funds', align: 'center' } },
        { attrs: { label: '在保余额(万元)', prop: 'left_funds', align: 'center' } },
        {
          attrs: { label: '本次还款时间', prop: 'pay_time', align: 'center' },
          process: v => this.$utils.dateFormat(v, 'yyyy-MM-dd'),
        },
        { attrs: { label: '应还本金(元)', prop: 'capital', align: 'center' } },
        {
          attrs: { label: '操作', align: 'center', width: 140 },
          operations: [
            {
              content: '催收登记',
              icon: 'fa fa-edit',
              event: this.handleEdit,
              // ifRender: row => +row.is_normal === 0,
            },
            {
              content: '还款跟踪',
              icon: 'fa fa-credit-card',
              event: this.handlerRepay,
            },
            {
              content: '查看',
              icon: 'fa fa-search',
              event: this.handleView,
            },
          ],
        },
      ],
      loading: false,
      editVisible: false,
      editId: '',
      formData: {},

      replayVisible: false,
      queryId: '',
      queryDate: [],
      countData: {},
      countLoading: false,
      countDataTotal: '',

      // 查看
      viewId: '',
      viewVisible: false,
    }
  },
  computed: {
    ...mapGetters(['clientId']),
  },
  watch: {},
  created() {
    this.params['service_id.eq'] = this.clientId
    this.getData()
  },
  mounted() {},
  methods: {
    handleDateQuery() {
      this.params['pay_time.gte'] = ''
      this.params['pay_time.lt'] = ''
      if (!this.queryDate || !this.queryDate.length) {
        this.getData()
        return
      }
      let startTime = ''
      let endTime = ''
      const date = new Date(this.queryDate[0])
      startTime = date
        ? `${date.getFullYear()}-${(date.getMonth() + 1 + '').padStart(2, 0)}-01`
        : ''
      endTime = date
        ? `${new Date(this.queryDate[1]).getFullYear()}-${(
            new Date(this.queryDate[1]).getMonth() +
            2 +
            ''
          ).padStart(2, 0)}-01`
        : ''

      this.params['pay_time.gte'] = startTime
      this.params['pay_time.lt'] = endTime
      this.getData()
    },
    handlerRepay(row = {}) {
      this.queryId = row.customer_related_id || ''
      this.replayVisible = true
    },
    handleEdit(row) {
      this.editVisible = true
      this.editId = row.customer_related_id || ''
    },
    handleView(row) {
      this.viewId = row.customer_related_id
      this.viewVisible = true
    },
    getCount() {
      this.countLoading = true
      const { index, size, ...params } = this.params
      Promise.all([
        this.$api.getData(this.$serviceName, this.tableName, {
          ...params,
          groupFunc: `round(sum(capital)|2)`,
        }),
        this.$api.getData(this.$serviceName, this.tableName, {
          ...params,
          index: 1,
          size: 1,
          groupFields: 'customer_related_id',
        }),
      ])
        .then(([res, count]) => {
          this.countDataTotal = count?.data?.totalCount ?? ''
          this.countData = res?.data?.[0] ?? {}
        })
        .finally(() => {
          this.countLoading = false
        })
    },
    getData() {
      this.loading = true
      this.getCount()
      this.$api
        .getData(this.$serviceName, this.tableName, this.params, this.order)
        .then(res => {
          const data = res?.data ?? {}
          this.tableData = data?.data ?? []
          this.totalCount = data?.totalCount ?? 0
        })
        .finally(() => {
          this.loading = false
        })
    },
  },
}
</script>

<style lang="scss" scoped></style>
